<template>
  <view class="container">
    <image src="@/static/cart_empty@2x.png"> </image>
    <text>黑猫优购</text>
    <view class="login-view" @click="loginAction">一键登录</view>
    <text>登录后享受更多权益</text>
  </view>
</template>

<script>
import { mapState } from "vuex"

export default {
  methods: {
    loginAction() {
      uni.login({
        provider: "weixin",
        success: (event) => {
          uni.getUserInfo({
            provider: "weixin",
            success: (result) => {
              this.requestLogin(result.userInfo)
            },
          })
        },
      })
    },

    async requestLogin(userInfo) {
      const value = await this.$http.weixinLogin()
      console.log(userInfo)
      this.$store.commit("login", userInfo)
      this.$mrouter.switchTab("/pages/index/index")
    },
  },

  computed: {
    ...mapState(["userInfo"]),
  },
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f1f1f1;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  image {
    margin-top: 200rpx;
    width: 200rpx;
    height: 200rpx;
    border-radius: 100rpx;
    background-color: gray;
  }

  .login-view {
    margin-top: 50rpx;
    width: 600rpx;
    height: 100rpx;
    border-radius: 50rpx;
    text-align: center;
    line-height: 100rpx;
    color: white;
    background-color: #c00000;
  }

  text {
    margin-top: 20rpx;
    font-size: 30rpx;

    &:last-child {
      color: gray;
      font-size: 25rpx;
    }
  }
}
</style>
